import React, { useState, useEffect } from 'react';
import { Tabs, message } from 'antd';
import InterfaceInfo from './interfaceInfo';
import PublishHistory from '../../components/Detail/publishHistory';
import Debug from '../../components/Detail/debug';
import InterfaceDoc from '../../components/Detail/interfaceDoc';
import services from '../../../../../services/api';

const InterfaceManageDetail = (props) => {
  const [data, setData] = useState({});

  useEffect(() => {
    getInnerInterfaceDetail();
  }, []);

  const getInnerInterfaceDetail = async () => {
    const id = props.match.params.id;
    const { code, msg, data } = await services.interfaceManage.detail(id);
    if (code) return message.error(msg);
    setData(data);
  };

  const tabList = [
    {
      key: '0',
      title: '接口信息',
      component: InterfaceInfo,
    },
    {
      key: '1',
      title: '发布历史',
      component: PublishHistory,
    },
    // {
    //   key: '2',
    //   title: '授权信息',
    //   component: AuthorizeInfo,
    // },
    {
      key: '3',
      title: '接口调试',
      component: Debug,
    },
    {
      key: '4',
      title: '接口文档',
      component: InterfaceDoc,
    },
  ];

  return (
    <Tabs style={{ width: '100%' }} defaultActiveKey='0'>
      {tabList.map((item) => (
        <Tabs.TabPane tab={item.title} key={item.key} forceRender={true}>
          <item.component {...props} value={data} />
        </Tabs.TabPane>
      ))}
    </Tabs>
  );
};
export default InterfaceManageDetail;
